<template>
    <div class='key-container' ref="key-container" :class="{'focus': focusFlag}">
        <!-- <slot name="input">
            <div class='input-box'>
                <span style="color:#ccc;" v-if="!number">{{placeholder}}</span>
                <span>{{ number }}</span>
                <span class="scroll_flag" ref="scrollFlag"></span>
            </div>
        </slot> -->
        <div class="keyboard-modal" v-if="focusFlag&&closeModal" @click.stop="focusInput2">
        </div>
        <div class='keyboard fix_iphonex px1bb' :class="{'show': focusFlag,'closeModal':!closeModal}" @click.stop='()=>{return;}'>
            <!-- <div class='input-box' @click.stop='()=>{return}'>
                <span style="color:#ccc;" v-if="!number">{{placeholder}}</span>
                <span class="number-value">{{ number }}</span>
            </div> -->
            <div class="confirm" v-if="focusFlag&&closeModal">
                <span @click.stop="focusInput2">
                    完成
                </span>
            </div>
            <div class='key-row'>
                <div class='key-cell' data-num='1' @touchstart="touchstart" @touchend="touchend">1</div>
                <div class='key-cell' data-num='2' @touchstart="touchstart" @touchend="touchend">2</div>
                <div class='key-cell' data-num='3' @touchstart="touchstart" @touchend="touchend">3</div>
            </div>
            <div class='key-row'>
                <div class='key-cell' data-num='4' @touchstart="touchstart" @touchend="touchend">4</div>
                <div class='key-cell' data-num='5' @touchstart="touchstart" @touchend="touchend">5</div>
                <div class='key-cell' data-num='6' @touchstart="touchstart" @touchend="touchend">6</div>
            </div>
            <div class='key-row'>
                <div class='key-cell' data-num='7' @touchstart="touchstart" @touchend="touchend">7</div>
                <div class='key-cell' data-num='8' @touchstart="touchstart" @touchend="touchend">8</div>
                <div class='key-cell' data-num='9' @touchstart="touchstart" @touchend="touchend">9</div>
            </div>
            <div class='key-row'>
                <div class='key-cell key-crile-cell' v-if="point" data-num='.' @touchstart="touchstart" @touchend="touchend">
                    <span class="key-crile" data-num='.'>

                    </span>
                </div>
                <div class='key-cell' data-num='-1' v-else>
                </div>
                <div class='key-cell' data-num='0' @touchstart="touchstart" @touchend="touchend">0</div>
                <div class='key-cell img_reduce' data-num='D' @touchstart="touchstart" @touchend="touchend">
                    <img data-num='D' src="~@/assets/imgs/components/icon_reduce.png">
                </div>
            </div>
        </div>
        <div class="key-cursor-bg" :style="cursorStyle">
            <div class="key-cursor-content">
                <span class="key-num-cursor">
                    {{number}}
                </span>
                <span class="key-cursor">
                </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        focus: {
            type: Boolean,
            default: true
        },
        placeholder: {
            type: String,
            default: '请输入'
        },
        point: {
            type: Boolean,
            default: false
        },
        closeModal: {
            type: Boolean,
            default: true
        },
        initNum:{
            type: null,
        },
        maxLength:{
            type: Number,
            default: 30
        }
    },
    data() {
        return {
            number: '',
            activeIndex: '',
            focusFlag: this.focus,
            cursorStyle:'display:none;'
        }
    },
    created() {
        // if(this.initNum){
        //     this.number = this.initNum;
        // } 
    },
    methods: {
        //处理按键
        _handleKeyPress(e) {
            let num = e.target.dataset.num;
            //不同按键处理逻辑
            // -1 代表无效按键，直接返回
            if (num == -1||num==undefined) return false;
            // this.$refs.scrollFlag.scrollIntoView();
            switch (String(num)) {
                //小数点
                case '.':
                    this._handleDecimalPoint();
                    break;
                //删除键
                case 'D':
                    this._handleDeleteKey();
                    break;
                //清空键
                case 'C':
                    this._handleClearKey();
                    break;
                //确认键
                case 'S':
                    // e.target.focus();
                    // this.focusFlag = false;
                    this.$emit('update:focus', false);
                    break;
                default:
                    this._handleNumberKey(num);
                    break;
            }
        },
        //处理小数点函数
        _handleDecimalPoint() {
            if(typeof this.number == "undefined"){
                this.number = '';
            }
            //如果包含小数点，直接返回
            if (this.number.indexOf('.') > -1) return false;
            //如果小数点是第一位，补0
            if (!this.number.length) {
                this.number = '0.';
            }
            //如果不是，添加一个小数点
            else {
                this.number = this.number + '.';
            }
            this._handleConfirmKey();

        },
        //处理删除键
        _handleDeleteKey() {
            let S = this.number?this.number:'';
            //如果没有输入，直接返回
            if (!S.length) return false;
            //否则删除最后一个

            this.number = S.substring(0, S.length - 1);
            this._handleConfirmKey();

        },
        //处理清空键
        _handleClearKey() {
            this.number = '';
            this._handleConfirmKey();
        },
        //处理数字
        _handleNumberKey(num) {
            let S = this.number?this.number:'';

            if(this.point){
                //如果有小数点且小数点位数不小于2
                if (S.indexOf('.') > -1 ){
                    if( S.substring(S.indexOf('.') + 1).length < 2){
                        this.number = S + num;
                    }else{
                        // this.$emit('error','最多输入两位小数')
                    }
                }
                //没有小数点
                if (!(S.indexOf('.') > -1)) {
                    //如果第一位是0，只能输入小数点
                    if (num == 0 && S.length == 0)
                        this.number = '0.';

                    else {
                        if (S.length && Number(S.charAt(0)) === 0) return;
                        this.number = S + num;
                    }

                }
            }else{
                this.number = S + num;
            }
            
            this._handleConfirmKey();

        },
        //提交
        _handleConfirmKey() {
            if(typeof this.number == "undefined"){
                this.number = '';
            }
            
            let S = this.number;
            //未输入
            // if (!S.length){
            // 	alert( '您目前未输入!' )
            // 	return false;
            // }
            //将 8. 这种转换成 8.00
            // if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
            // 	S = Number(S.substring(0, S.length - 1)).toFixed(2);
            //保留两位
            // S = Number(S).toFixed(2);
            // this.activeIndex = S.length - 1;
            let maxLength = this.maxLength;
            if(S.indexOf('.') != -1){
                let numArr = S.split('.');
                if(numArr[0].length > this.maxLength){
                    numArr[0] = numArr[0].slice(0,this.maxLength);
                };
                S = numArr.join('.');
            }else{
                if(S.length > this.maxLength){
                   S = S.slice(0,this.maxLength);
                }
            };
            this.number = S;
            this.$emit('confirmEvent', S);
        },
        focusInput() {
            // this.$refs.scrollFlag.scrollIntoView();
            // this.focusFlag = false;
            this.$emit('update:focus', false);
        },
        focusInput2(){
           this.$emit('update:focus', false);
           this.$emit('finish');
        },
        touchstart(e) {
            // e.preventDefault();
            this._handleKeyPress(e);
            // e.target.style = "background-color: #f0f0f0;"
        },
        touchend(e) {
            e.preventDefault();
            // e.target.style = "";
        },
        showCursor(e,style){
            console.log(e);
            // e.toElement.appendChild('<div>|</div>')
            // let left = e.target.offsetLeft?e.target.offsetLeft:0,top = e.target.offsetTop?e.target.offsetTop:0,height=e.target.offsetHeight;
            // this.cursorStyle = 'left:'+left+'px;top:'+top+'px;height:'+height+'px;'+style;
        },
        hideCursor(){
            this.cursorStyle = 'display:none;';
        },
        setValue(val){
            this.number = val+'';
        }
    },
    watch: {
        focus(val) {
            this.focusFlag = val;
            this.number = this.initNum;
            if (val) {
                let inputs = document.getElementsByTagName('input');
                for (let i = 0; i < inputs.length; i++) {
                    inputs[i].blur();
                }
            }else{
                this.hideCursor();
            }
        }
    }
}
</script>

<style scoped>
.key-container {
  /* margin-top: 50px;
        width: 100%;
        display: flex;
        display : -webkit-flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between; */
  /* width: 3rem; */
  height: 0.36rem;
}
.key-container .keyboard-modal {
  position: fixed;
  /* top: 0.94rem; */
  top:0;
  width: 100%;
  height: 100%;
  z-index: 102;
}
.input-box {
  position: relative;
  font-size: 0.3rem;
  color: #333;
  /* width: 3rem; */
  height: 0.6rem;
  /* margin-bottom: 10px; */
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-box.show {
  transform: translateY(0);
}
.input-box .scroll_flag {
  position: absolute;
  /* width: 6px; */
  /* height: 6px; */
  width: 0.12rem;
  height: 0.12rem;
  background-color: pink;
  top: -2rem;
}
.focus .input-box .number-value::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 0.04rem;
  right: -0.05rem;
  top: 0;
  background-color: #426bf2;
  animation: twinkle 1s steps(60) infinite;
}
.input-box span {
  position: relative;
  font-size: 0.5rem;
}
.input-box span.number-value {
  text-shadow: 0 0.08rem 0.4rem #666;

  color: #314659;
}
/* .input-box span.active::after{
        content: '';
        position: absolute;
        height: 100%;
        width: 0.04rem;
        right: -0.05rem;
        top: 0;
        background-color: #426bf2;
        animation: twinkle 1s steps(60) infinite;
    } */
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.keyboard {
  position: fixed;
  bottom: 0px;
  left: 0;
  /* height: 264px; */
  height: 5.28rem;
  width: 100%;
  background-color: #fafbfc;
  transition: all 0.3s;
  z-index: 104;
  transform: translateY(100%);
}
.keyboard.px1bb::after{
   background-color: #ddd;
}

/* x,xs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .keyboard.px1bb::after {
      bottom: 0.68rem;
  }
}
/* xr */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .keyboard.px1bb::after {
      bottom: 0.68rem;
  }
}

/* xs max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .keyboard.px1bb::after {
      bottom: 0.68rem;
  }
}

.keyboard.closeModal{
    /* height: 220px; */
    height: 4.4rem;
}
.keyboard.show {
  transform: translateY(0);
}
.keyboard .confirm {
  display: flex;
  /* height: 44px; */
  height: 0.88rem;
  align-items: center;
  justify-content: flex-end;
  background: #fafbfc;
}
.keyboard .confirm span {
  color: #14C877;
  font-size: 0.3rem;
  padding: 0 0.3rem;
}

.keyboard .key-row {
  display: flex;
  display: -webkit-flex;
  position: relative;
  /* height: 55px; */
  height: 1.1rem;
  /* line-height: 55px; */
  line-height: 1.1rem;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: #000;
}

.keyboard .key-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #ddd;
  color: #323746;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.keyboard .key-cell {
  flex: 1;
  -webkit-box-flex: 1;
  text-align: center;
  position: relative;
  font-size: 0.54rem;
  color: #323746;
  -webkit-tap-highlight-color: #000;
}
.keyboard .key-cell.key-crile-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}
.keyboard .key-cell .key-crile {
  width: .12rem;
  height: .12rem;
  border-radius: 50%;
  background: #323746;
  display: block;
}
.keyboard .key-cell:active {
  background-color: #f0f0f0;
}
.keyboard .key-cell.img_reduce {
  display: flex;
  align-items: center;
  justify-content: center;
}
.keyboard .key-cell.img_reduce img {
  width: 0.61rem;
  height: auto;
}

.keyboard .key-cell::after {
  content: "";
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  height: 200%;
  border-right: 1px solid #ddd;
  color: #323746;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.keyboard .key-cell:nth-last-child(1)::after {
  border-right: 0;
}

.keyboard .disabled {
  background: rgba(0, 0, 0, 0.2);
}
.keyboard .disabled:active {
  background: rgba(0, 0, 0, 0.2);
}

.keyboard .key-confirm {
  position: absolute;
  text-align: center;
  /* height: 118px; */
  height: 2.36rem;
  width: 25%;
  /* line-height: 118px; */
  line-height: 2.36rem;
  background: #fafbfc;
  z-index: 5;
  right: 0;
  bottom: 1px;
  /* font-size: 20px; */
  font-size: 0.4rem;
  color: #666;
}
.keyboard .key-confirm:active {
  background-color: #f0f0f0;
}
.key-container .key-cursor-bg{
    position: fixed;
    width: .04rem;
}
.key-container .key-cursor{
    position: fixed;
    width: .04rem;
    height: 0;
    background: #000;
    animation: key-cursor-animation .5s infinite;
}
.key-container .key-cursor{

}
@keyframes key-cursor-animation{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
</style>